<template>
  <div id="tencentMapBox">
    这是一个腾讯地图演示版本 标记的使用
    <div id="info">
      当前mark坐标为：
      <span v-if="markIsHover" id="position">{{
        HoverInfo.lat + "," + HoverInfo.lng
      }}</span>
      <span v-else>鼠标移开了解除了</span>
    </div>
    <div id="container" />
    <div id="button-box">
      <el-button type="primary" @click="addMark">添加mark标记</el-button>
      <el-button type="primary" @click="removeAddMark">结束mark标记</el-button>
      <el-button type="primary" @click="canDraw">mark可拖拽</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
export default {
  name: 'TencentMapMark',
  data() {
    return {
      map: null,
      temp: null,
      option: {
        center: new TMap.LatLng(39.984120, 116.307484), // 设置地图中心点坐标
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
        zoom: 17 // 设置地图缩放级别
      },
      markerLayer: [],
      markIsHover: false,
      HoverInfo: {
        lat: null,
        lng: null
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      this.temp = document.getElementById('container')
      const confg = {
        viewMode: '2D'
      }
      const option = Object.assign(this.option, confg)
      this.map = new TMap.Map(this.temp, option)
      this.initMarkerLayer()
    },
    initMarkerLayer() {
      // 监听点击事件添加marker
      this.markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        styles: {
          'highlight': new TMap.MarkerStyle({
            'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png'
          })
        },
        map: this.map
      })
    },
    addMark() {
      this.markerLayer.on('hover', this.markHover)
      this.map.on('click', this.addMarkPoit)
    },
    addMarkPoit(evt) {
      const point = {
        id: new Date(),
        position: evt.latLng
      }
      this.markerLayer.add(point)
    },
    removeAddMark() {
      this.map.off('click', this.addMarkPoit)
      this.removeHoverEvent()
    },
    markHover(e) {
      this.markIsHover = !this.markIsHover
      if (this.markIsHover) {
        this.HoverInfo = e.geometry ? e.geometry.position : null
      }
      // const info = this.markerLayer.getGeometryById(e.target)
    },
    resetDom() {
      this.temp.remove()
      const tencentMapBox = document.getElementById('tencentMapBox')
      this.temp = document.createElement('div')
      this.temp.id = 'container'
      tencentMapBox.insertBefore(this.temp, tencentMapBox.childNodes[0])
    },
    removeHoverEvent() {
      this.markerLayer.off('hover', this.markHover)
    },
    // 创建可拖拽mark
    canDraw() {
      this.removeAddMark()
      new TMap.tools.GeometryEditor({
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [{
          overlay: this.markerLayer, // 可编辑图层
          id: 'marker',
          selectedStyleId: 'highlight' // 被选中的marker会变为高亮样式
        }],
        actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'marker', // 激活图层
        selectable: true
      })
    }
  }
}
</script>
<style  lang="less">
#info {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 14px;
  background: #fff;
  width: 270px;
  padding: 10px;
  border-radius: 3px;
  z-index: 1;
}
</style>
